<template>
  <div class="login-page">
    <el-alert v-if="isWechat" center title="网站无法在微信内置浏览器打开, 请使用系统浏览器访问" type="error" effect="dark" :closable="false">
    </el-alert>
    <div class="login-box">
      <div class="login-title">
        AI产品经理管理平台
      </div>
      <div class="owl">
        <div :class="shutEye ? 'hand password' : 'hand'"></div>
        <div :class="shutEye ? 'hand hand-r password' : 'hand hand-r'"></div>
        <div class="arms">
          <div :class="shutEye ? 'arm password' : 'arm'"></div>
          <div :class="shutEye ? 'arm arm-r password' : 'arm arm-r'"></div>
        </div>
      </div>
      <div class="form-box">
        <el-form class="login-form" ref="loginForm" :rules="loginRules" :model="loginForm">
          <el-form-item prop="username">
            <el-input size="large" placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="loginForm.username">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input size="large" placeholder="请输入密码" prefix-icon="el-icon-s-opportunity" v-model="loginForm.password"
              @focus="handleFocusPwd" @blur="handleBlurPwd" show-password></el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <el-row>
              <el-col :span="14"><el-input v-model="loginForm.captcha" placeholder="请输入验证码"
                  prefix-icon="el-icon-question" @change="handleChangeCaptcha"></el-input></el-col>
              <el-col :span="10">
                <img v-if="requestGetCaptchaSuccess" style="margin-top: 2px" :src="captchaImage"
                  @click="handleChangeGetCaptcha" />
                <img v-else src="../assets/checkcode.png" @click="handleChangeGetCaptcha" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item size="large">
            <el-button style="width: 200px;" type="danger" :disabled="isWechat || loginBtnDisabled"
              @click="handleSubmit('loginForm')">
              {{isWechat?'无访问权限':'进入课堂'}}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
  import Vue from 'vue'
  import { mapActions } from 'vuex'
  import { ACCESS_TOKEN, INDEX_MAIN_PAGE_PATH } from '@/store/mutation-types'
  import { getAction } from '@/api/manage'

  export default {
    data() {
      const userAgent = navigator.userAgent.toLowerCase()
      let isWechat = false
      if (userAgent.indexOf('micromessenger') > -1 || userAgent.indexOf('wechat') > -1 || userAgent.indexOf('weixin') > -1)
        isWechat = true
      return {
        userAgent,
        isWechat,
        loginBtnDisabled: false,
        shutEye: false,
        captchaImage: '',
        requestGetCaptchaSuccess: false,
        loginRules: {
          username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        },
        loginForm: {
          username: '',
          password: '',
          captcha: '',
        },
      }
    },
    beforeCreate() {
      document
        .querySelector('body')
        .setAttribute(
          'style',
          'background: linear-gradient(135deg, rgba(24, 42, 115, 1) 0%, rgba(33, 138, 174, 1) 69%, rgba(32, 167, 172, 1) 89%);'
        )
    },
    created() {
      var that = this
      document.onkeydown = function (e) {
        var key = window.event.keyCode
        if (key == 13) {
          that.handleSubmit('loginForm')
        }
      }
      this.currdatetime = new Date().getTime()
      Vue.ls.remove(ACCESS_TOKEN)
      this.handleChangeGetCaptcha()
    },
    beforeDestroy() {
      document.onkeydown = null
    },
    methods: {
      ...mapActions(['Login']),
      handleFocusPwd() {
        this.shutEye = true
      },
      handleBlurPwd() {
        this.shutEye = false
      },
      handleChangeCaptcha(value) {
        this.loginForm.captcha = value
      },
      handleChangeGetCaptcha() {
        this.currdatetime = new Date().getTime()
        getAction(`/sys/randomImage/${this.currdatetime}`)
          .then((res) => {
            if (res.success) {
              this.captchaImage = res.result
              this.requestGetCaptchaSuccess = true
            } else {
              this.$message.error(res.message)
              this.requestGetCaptchaSuccess = false
            }
          })
          .catch(() => {
            this.requestGetCaptchaSuccess = false
          })
      },
      requestFailed() {
        this.loginBtnDisabled = false
      },
      handleSubmit(formName) {
        let that = this
        let loginParams = {}
        that.loginBtnDisabled = true
        that.$refs[formName].validate((valid) => {
          if (valid) {
            // 开始
            loginParams = {
              ...that.loginForm,
              username: that.loginForm.username.trim(),
              password: that.loginForm.password.trim(),
              remember_me: true,
              checkKey: that.currdatetime,
            }
            that
              .Login(loginParams)
              .then((res) => {
                if (res.code == 200) {
                  // 登录成功
                  that.$router.push({ path: INDEX_MAIN_PAGE_PATH })
                } else {
                  that.$message.error('账号登录失败，请联系运营【AIGC1111】')
                }
              })
              .catch((err) => {
                if (err.message.indexOf('限制登录') > -1) {
                  let message = err.message
                  message = message.replace(
                    /【/g,
                    ' <span style="font-size: small;font-weight: bold;color: #F56C6C;">'
                  )
                  message = message.replace(/】/g, '</span> ')
                  that.$alert(message, '登录限制', {
                    center: true,
                    type: 'warning',
                    confirmButtonText: '复制信息',
                    dangerouslyUseHTMLString: true,
                    callback: (action) => {
                      that.$copyText(err.message).then(function (e) {
                        that.$message.success('复制成功')
                      })
                    },
                  })
                }
              })
              .finally(() => {
                that.loginBtnDisabled = false
              })
          } else {
            that.loginBtnDisabled = false
            return false
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .login-page {
    overflow: hidden;
    width: 100%;
    height: 100%;

    .login-bg {
      width: 100%;
      height: 100%;
      position: relative;
      ;
    }

    .login-box {
      margin-top: 100px;

      .login-title {
        margin: 30px auto;
        line-height: 50px;
        height: 50px;
        font-size: 28px;
        color: #F8F8F8;
      }

      .owl {
        margin: -9px auto;
        width: 211px;
        height: 108px;
        background-image: url(~@assets/img/owl-head.png);
        position: relative;

        .hand {
          width: 34px;
          height: 34px;
          border-radius: 40px;
          background-color: #472d20;
          transform: scaleY(0.6);
          position: absolute;
          left: 14px;
          bottom: -8px;
          transition: 0.3s ease-out;
        }

        .hand.password {
          transform: translateX(42px) translateY(-15px) scale(0.7);
        }

        .hand.hand-r {
          left: 170px;
        }

        .hand.hand-r.password {
          transform: translateX(-42px) translateY(-15px) scale(0.7);
        }

        .arms {
          position: absolute;
          top: 58px;
          height: 41px;
          width: 100%;
          overflow: hidden;

          .arm {
            width: 40px;
            height: 65px;
            background-image: url(~@assets/img/owl-arm.png);
            position: absolute;
            left: 20px;
            top: 40px;
            transition: 0.3s ease-out;
          }

          .arm.password {
            transform: translateX(40px) translateY(-40px);
          }

          .arm.arm-r {
            left: 158px;
            transform: scaleX(-1);
          }

          .arm.arm-r.password {
            transform: translateX(-40px) translateY(-40px) scaleX(-1);
          }
        }
      }

      .form-box {
        margin: 0px auto;
        padding: 30px 30px 10px 30px;
        background-color: #F8F8F8;
        width: 300px;
        border-radius: 20px;

        .login-form,
        .register-form {
          margin-top: 20px;
        }

        .register-form {
          .verify-code-input {
            width: 60%;
            float: left;
          }

          .verify-code-btn {
            width: 40%;
            float: right;
          }

          .register-btn {
            margin-top: 20px;
          }
        }
      }
    }
  }
</style>